<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VIS Report - 5D Astronomical Visualization</title>
<link rel="stylesheet" type="text/css" href="vis-report.css" media="screen">
<link rel="stylesheet" href="vis-report-print.css" type="text/css" media="print" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.1.4" media="screen" />
<script src="jquery.js"></script>
<script src="fancybox/jquery.fancybox.pack.js"></script> 
<script>
  $(document).ready(function(){
    var height = $(window).height() - 200;
    $('#scrollcontent').css('max-height',""+height+"px");
    $('#leftpane').css('width','20%');
    $('#rightpane').css('width','20%');
	$(".fancybox").fancybox();
	$(".fancybox-effects-d").fancybox({
		padding: 0, openEffect : 'elastic', openSpeed  : 150, closeEffect : 'elastic', closeSpeed  : 150, closeClick : true,
		helpers : {
			title : {
				type : 'over'
			}  }  });
  });
  $(window).resize(function(){
    var height = $(window).height() - 200;
    $('#scrollcontent').css('max-height',""+height+"px");
});
</script>
</head>
<body>
<h1>VIS Report - 5D Astronomical Visualization</h1>
<h2 class="subtitle">An astronomical data visualiser for Pulsar Detection</h2>
<table width=100%>
<td id="leftpane">
<div class="keeponscreen">
<ol><h3>Report Sections</h3>
  <li class="mainnav"><a class="navlink" href="#introduction">Introduction</a></li>
  <li class="mainnav"><a class="navlink" href="#problemstatement">Problem Statement</a></li>
  <li class="mainnav"><a class="navlink" href="#relatedwork">Related Work</a></li>
  <li class="mainnav"><a class="navlink" href="#iterativedesign">Iterative Design Process</a></li>
  <li class="mainnav"><a class="navlink" href="#iteration1">Iteration 1</a></li>
  <li class="mainnav"><a class="navlink" href="#iteration2">Iteration 2</a></li>
  <li class="mainnav"><a class="navlink" href="#visualqueries">Visual Queries</a></li>
  <li class="mainnav"><a class="navlink" href="#conclusion">Conclusion</a></li>
  <li class="mainnav"><a class="navlink" href="#references">References</a></li>
  <li class="mainnav"><a class="navlink" href="#downloads">Downloads</a></li>
</ol>
</div>
</td>
<!-- TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK -->
<td class="mainpane">
<div class="scrollable" id="scrollcontent">
<ol class="mainreport">
<li class="mainreport"><a name="introduction">Introduction</a></li>

<p>The 5D Visualiser is designed to able to manipulate views of multi-dimensional data to provide the user with an
opportunity to interrogate the data. While the concepts (and indeed the program) can be used for any discretised four-dimensional
axis set with floating-point fifth dimension values,it has been designed to assist with finding anomalies in astronomical data,
which would lead to discovery of new objects from gathered radio-astronomy data.</p>

<li class="mainreport"><a name="problemstatement">Problem Statement</a></li>
<p>Chris Laidler, a UCT Computer Science Ph.D. student, has been doing research into Binary Pulsar
detection using Radio Satellite data and CUDA (Compute Unified Device Architecture). In order for him to
visually test if his methods and algorithms are working, he requires the ability to view 5-Dimensional data.</p>

<p>The input data sets that Chris has are simulated real data (data generated to mimic real data). The files are structured as
four dimensions with names, their boundaries and a "flattened array" of IEEE-754 float values to fit into a four-dimensional array. The data in
each array position indicates the  fifth dimension.</p>

<p>Chris requires a Visualiser for this data in order to determine what is happening within the data visually 
and to confirm that solutions found using blind-detection make sense according to the data-set. The problem 
eminates from five dimensions being nearly impossible to understand spatially and visually. The 5D data comprises
of normal 3D data, an extra series for each of the 3D points and the colour for every point along the series.</p>

<p>We use the term &quot;temperature&quot; to mean the fifth dimensional value of the point throughout the visualisation.</p>

<li class="mainreport"><a name="relatedwork">Related Work</a></li>

<h3 class="reportheading">Blind Finding Pulsars</h3>
<p>Chris Laidler had made a very basic version of the 3D viewer we used in OpenGL with the Qt library, 
using rather arcane keyboard shortcuts to navigate through the data. We based our 3D viewer frame on
the basic concept he had implemented and the fixing of dimensions was a suggestion he had made.</p>

<h3 class="reportheading">Vaa3D</h3>
<p>A multi-dimensional viewer that is capable of displaying up to 5-Dimensions.
It uses the same concept we have implemented: Fixing a single dimension to limit
the usable dimensions to 4. This allows them to do Marching Cubes on the data in
order to display them as ISO Surfaces.</p>
<p>The Drawbacks of Vaa3D is that it does not allow you to select a single point
within the visual data, nor does it allow even further deconstruction (It only fixes
a single dimension, thus only showing a 3D option).</p>
<p>Given the memory constraints (given the sizes of the data sets), we have not persued this for this project.

<li class="mainreport"><a name="iterativedesign">Iterative Design Process</a></li>

<p>We went through two major iterations of the software. While the number may be low,
we had weekly consultation sessions with Chris where the requirements and details were clarified.</p> 

<p>Design sessions were rather ad-hoc, with instant messaging and version-control systems taking care of 
the project management aspects. This also provides a simple means of returning to previous iterations.</p>

<li class="mainreport"><a name="iteration1">Iteration 1</a></li>
<div class="imagearray">
  <!--  <img src="images/sliders_old.jpg" class="capturepicturesmall" id="oldpic1"></a> -->
  <a class="fancybox-effects-d" href="images/sliders_old.jpg" title="Initial Sliders Iteration"><img src="images/sliders_old.jpg" class="capturepicturesmall" id="oldpic1"/></a>
  <a class="fancybox-effects-d" href="images/2dplot_old.jpg" title="Initial 2D Plot Iteration"><img src="images/2dplot_old.jpg" class="capturepicturesmall" id="oldpic2" /></a>
  <a class="fancybox-effects-d" href="images/3dplot_old.jpg" title="Initial 3D Plot Iteration"><img src="images/3dplot_old.jpg" class="capturepicturesmall" id="oldpic3"/></a>
  <a class="fancybox-effects-d" href="images/heatmap_old.jpg" title="Initial Heat-Map Iteration"><img src="images/heatmap_old.jpg" class="capturepicturesmall" id="oldpic4"/></a>
</div><br/>
<p>
<h3 class="reportheading">Slider Menu</h3>
<h4 class="authoredby">by Brandon</h4>
<p>The slider menu was designed to supply a the user with an easy way to change which dimensions are fixed,
the range for each dimension to display, and the range of colour (temperature) values to use for the given data.</p>

<p>The first iteration had 3 vertical scroll bars next to the dimension labels for each axis and next to the
sliders to determine the range to display for each dimension. This was done for space conservation,
aesthetics and intuitiveness of the interface.</p>

<p>The Temperature slider was placed right under that since we believe that is the next most important slider.
The 3 Step sliders which change where in the fixed dimensions the value should be fixed, were then placed so
that they would be nearer to the middle of the screen at a full high-definition resolution for ease of use. None of these were
coloured or differently shaped than each other; merely placed in an order which was thought to be understandable.</p>

<p>The Sliders menu is also considered the main window since when it is closed, everything else does too. It also has the
ability to reopen closed plotter screens and load the data files.</p>

<p>Due to screen space issues we decided to limit the number of labels on the Slider menu and have all the
sliders direct purpose be a tooltip that pops up when you hover of that slider. This is also reinforced
by the Help menu telling the user that there are tooltips for each slider.</p>

<div class="imageholder"><a class="fancybox-effects-d" href="images/sliders_old.jpg" title="Initial Sliders Iteration">
<img src="images/sliders_old.jpg" alt="Old Sliders" class="capturepicture" /></a></div>


<h3 class="reportheading">2D Plot Graph</h3>
<h4 class="authoredby">by Brandon</h4>
<p>This is a 2D visualization comprised of a single axis with temperature values.</p>

<p>The graphs first iteration was just a basic usage of the JFreeChart open source library.
Basically the Slider menu sends the data to the constructor, which then sends the data filtered
by the range sliders to the JFreeChart library which then draws the Graph as rendered by default.</p>
<p>The problem is that the Line was all the same colour throughout. This means that all plotted
points would be red (the default colour) this removes a useful visual cue that is used by all our other plotters.</p>
<div class="imageholder"><a class="fancybox-effects-d" href="images/2dplot_old.jpg" title="Old 2D Plot">
<img src="images/2dplot_old.jpg" alt="Old 2D Plot" class="capturepicture" /></a></div>


<h3 class="reportheading">Heat-Map Graph</h3>
<h4 class="authoredby">by Strauss</h4>
<p>The Heat-Map draws the 3 unselected axes as a 2-Dimensional plot, with color indicating the temperature of the data. This graph is exactly the 2D plane which is displayed in the 3D graph detailed below.</p>
<p>The scale runs from cold (blue) through medium (yellow) to warm (red) between the values indicated on the gauge on the right. 
The colour of each point was determined by the relative temperature to the minimum and maximum set in the range-slider for temperature.</p>
<p>There is an indicated step, as obtained from the step slider for the 2D Plot, which shows which graph along the relevant axis is displayed in the 2D plot.</p>
<div class="imageholder"><a class="fancybox-effects-d" href="images/heatmap_old.jpg" title="Old HeatMap">
<img src="images/heatmap_old.jpg" alt="Old 2D Plot" class="capturepicture" /></a></div>


<h3 class="reportheading">3D Plot Graph</h3>
<h4 class="authoredby">by Benna</h4>
<p>In our 3D plotter we show a fourth dimension using temperature range from blue (lowest value) through yellow to red (highest value). We included all the usual features of a 3D plot including:</p>
    <ul>
      <li >Adjustable scales on each axis.</li>
      <li>A change in rotation which enables the user to make more accurate queries. The text displayed on each axis (both labels and values) are not rotated to ensure that they can easily be read.</li>
      <li>The ability to zoom in or out.</li>
      <li>A temperature scale.</li>
    </ul>
<br/>
<div class="imageholder"><a class="fancybox-effects-d" href="images/3dplot_old.jpg" title="Old 3D Plot">
<img src="images/3dplot_old.jpg" alt="Old 3D Plot" class="capturepicture" /></a></div>
    
    <p>However, since the user can only estimate the value each colour represents
we found it more satisfying to add a selection feature where the user only has to hover over a
point to query its actual value. The selected point is clearly visible because we use both colour
and size to differentiate it. Since the plot is shown on a black background we indicated the point in
white at approximately twice the size of the other points. In order not to obscure the points in close
proximity with a text overlay and preserve ease of reading text  we added a marker on the temperature scale
which indicates both original colour and value. The value is rendered above this marker.</p>
    
<div class="imageholder"><a class="fancybox-effects-d" href="images/3dplot_new_a.png" title="Old 3D Plot (A)">
<img src="images/3dplot_new_a.png" alt="Old 3D Plot (A)" class="capturepicture" /></a></div>
 
<p>The second task was to indicate what range of values the user is fixing for both the heat-map and graph.
Without a visual aid its hard to understand the context of what is being rendered on both these displays.
We’ve decided to indicate the border of a plane cutting through the data for the heat-map and use a line to
indicate what values on the plane are being rendered by the graph. We decided to show this on the axis in question,
to ensure that the user can accurately determine the value at which the dimension is fixed
(due to perspective it is rather hard to accurately read the position of  points in 3D space from the respective axis).</p>

</p>
<li class="mainreport"><a name="iteration2">Iteration 2</a></li>
<div class="imagearray">  
  <a class="fancybox-effects-d" href="images/sliders_new.jpg" title="Revised Sliders Iteration"><img src="images/sliders_new.jpg" class="capturepicturesmall" id="newpic1"/></a>
  <a class="fancybox-effects-d" href="images/2dplot_new.jpg" title="Revised 2D Plot Iteration"><img src="images/2dplot_new.jpg" class="capturepicturesmall" id="newpic2" /></a>
  <a class="fancybox-effects-d" href="images/3dplot_new.jpg" title="Revised 3D Plot Iteration"><img src="images/3dplot_new.jpg" class="capturepicturesmall" id="newpic3"/></a>
  <a class="fancybox-effects-d" href="images/heatmap_new.jpg" title="Revised Heat-Map Iteration"><img src="images/heatmap_new.jpg" class="capturepicturesmall" id="newpic4"/></a>
</div><br/>
<h3 class="reportheading">Using data instead of random values</h3>

<p>Due to time and resource constraints on the first iteration we only added the ability
to load observation data in the second iteration. This change put our work
into context. We found it easy to filter out unnecessary data and focus on
specific data which was the original intent of the project.</p>

<h3 class="reportheading">Slider Menu</h3>
<h4 class="authoredby">by Brandon</h4>

<p>We added colour to the sliders for an even greater visual cue. For the
Step, Range, and Fixed dimension choosing sliders, the colours represent a
link between those sliders and the dimension name with the same colour. But
the Temperature slider (the last slider in the image) the colour represents the temperature
at that point, this colour range for the temperature is the same as all the other plotters.</p>

<p>The position of the sliders were changed, and borders were added to help separate
sliders that do different things. This also allowed us to separate the Temperature slider
from the rest so that the fact that the temperature slider&apos;s colour is not connected to the other colours.</p>
<div class="imageholder"><a class="fancybox-effects-d" href="images/sliders_new.jpg" title="New Sliders">
<img src="images/sliders_new.jpg" alt="New Sliders" class="capturepicture" /></a></div>

<h3 class="reportheading">2D Plot Graph</h3>
<h4 class="authoredby">by Brandon</h4>

<p>The change to the graph plotter was to add colour to the Points matching the temperature as all
plotters have done. This holds for symmetry of our program, this caused adding a line to connect
each point very unintuitive, and so it was removed to be a Plot rather than a line graph.</p>

<div class="imageholder"><a class="fancybox-effects-d" href="images/2dplot_new.jpg" title="New 2D Plot">
<img src="images/2dplot_new.jpg" alt="New 2D Plot" class="capturepicture" /></a></div>

<h3 class="reportheading">Heat-Map Graph</h3>
<h4 class="authoredby">by Strauss</h4>
<p>The axes now list the names of the axes gathered from the input files in the colour provided by the Slider Menu.
This helps interrogate the data more efficiently, as one only has to remember the colours of the axes to query.</p>

<p>The temperature scale at the right adjusts the filtered maximum and minimum, but maintains its height relative to the global temperature range in the data file.
The unlisted ranges are blanked-out so that the user is aware that limits have been imposed on the range. This is more intuitive than the dynamically
scaling temperature gauge in the first iteration.</p>

<p>By hovering over (or clicking) a point, the values at the current point are displayed in a tooltip. 
This includes all four axes (indicated by their initial letter) to easily correlate data from data points.
Fixed Axes (the first two selected) are indicated with a &quot;#&quot; symbol.</p>

<p>Showing the current step (which selects the 2D plot) is more visible. We have used contrasting lines of black
and white to draw over the relevant row or column in the heat-map, which will be visible regardless of the colouring used in that data-set.</p>

<div class="imageholder"><a class="fancybox-effects-d" href="images/heatmap_new.jpg" title="New HeatMap">
<img src="images/heatmap_new.jpg" alt="New HeatMap" class="capturepicture" /></a></div>
<h3 class="reportheading">3D Plot Graph</h3>
<h4 class="authoredby">by Benna</h4>

<p>From the feedback we received it was clear that we only needed a few minor adjustments with
regards to the plotter. The first suggestion was that we provide the user with the ability to
view both a dark and a light themed version of the same visualization for printing purposes.
On the light theme we simply changed the colour of the background to white and the axis, text
and selected point to black. The second suggestion was to indicate the third fixed dimension
(that of the graph) by a line cutting through the plane, instead of only indicating it as a
marker on the axis in question.</p>

<div class="imageholder"><a class="fancybox-effects-d" href="images/3dplot_new_b.png" title="New 3D Plot (B)">
<img src="images/3dplot_new_b.png" alt="New 3D Plot (B)" class="capturepicture" /></a></div>

<li class="mainreport"><a name="visualqueries">Visual Queries</a></li>
<h3 class="reportheading">Find the Hottest Point</h3>

<p>This is used to locate a likely pulsar, since the temperature of emitted gases will be warm the image at that point.
By hovering over the Heat-Map, the Graph or the 3D plotter, the temperature of the point under the cursor will be displayed,
along with data to locate it within the dataset.</p>
<h3 class="reportheading">View a point through time</h3>

<p>By fixing and trimming dimensions, we can step through the time dimension using the 3D-Display Step slider.</p>
<h3 class="reportheading">View any axis as a graph in 2- or 3- dimensions</h3>

<p>When finding a particular pulsar, it may be useful to find or correlate the most likely pulsing frequencies.
If Frequency is one of the axes in the dataset, this can trivially be selected and the hottest point can be used
to confirm viability of proposed solutions.</p>
<li class="mainreport"><a name="conclusion">Conclusion</a></li>
<p>
We have made several improvements based on the comments we received from the class, our supervisor and Chris.
There is, however, room for improvement. One suggestion to represent the data as an isosurface
instead of just points (this requires an implementation of the well known marching cubes algorithm
and a fast implementation may rely on parallelization to achieve the speeds needed for surface
construction over a large dataset. A second major feature that is required is the ability to cut
through the data at an angle (this will require interpolation in 3D-space, this was left due to time
constraints, but may not be hard to achieve).</p>

<h3 class="reportheading">Issues:</h3>
<p>While constructing the file reader to read in the data provided by Chris we ran into platform-specific
issues. It seems that C stores integral values in Little-Endian where Java stores them in Big-Endian.
An intermediary conversion from binary data to ASCII data was introduced due to time constraints,
but this has to be addressed in the future (ASCII significantly increases the length of the representation
of floating point data and is not suitable for large datasets).</p>

<p>We also found issues with memory usage, as the number of dimensions makes it quite difficult to build data structures contiguously in memory. 
As a result, a copies of the data array were made whenever axes were filtered. This reduced the speed and complicated the memory usage pattern quite substantially. 
Even with garbage-collection enforced, committed memory of over 4 GiB was seen for a dataset of just over 1 GiB.</p>

<p>Having each Plot reflect the currently selected point is something which should be simple to implement. This was only excluded due to time-constraints.</p>

<li class="mainreport"><a name="references">References</a></li>
<ul>
<li><font class="creditname">Idea: </font><a href="http://people.cs.uct.ac.za/~claidler/msc/" target="_blank" class="creditlink">Blind Searching for Pulsars</a> by Chris Laidler</li>
<li><font class="creditname">Background: </font>Deep Space Nebula by <a href="http://hameed.deviantart.com/art/Deep-Space-Nebula-152575344" target="_blank" class="creditlink">Hameed</a></li>
<li><font class="creditname">Dynamic HTML Library: </font><a href="http://jquery.com" target="_blank" class="creditlink">jQuery</a></li>
<li><font class="creditname">Dynamic Image Library: </font><a href="http://www.fancyapps.com/fancybox" target="_blank" class="creditlink">fancyBox</a></li>
<li><font class="creditname">Charting Library: </font><a href="http://www.jfree.org/jfreechart" target="_blank" class="creditlink">JFreeChart Library</a></li>
<li><font class="creditname">OpenGL Library: </font><a href="https://jogamp.org/jogl‎" target="_blank" class="creditlink">jOGL Library</a></li>
<li><font class="creditname">Heat-Map Concept: </font><a href="http://www.mbeckler.org/heatMap" target="_blank" class="creditlink">HeatMap Library</a></li>
</ul>
<li class="mainreport"><a name="downloads">Downloads</a></li>
<ul>
<li><a href="data/5d-astro.tbz" class="downloadlink" target="_blank">Download the Tarball (bzip2)</a></li>
<li><a href="data/datasets.tbz" class="downloadlink" target="_blank">Download sample datasets (bzip2)</a></li>
<li><a href="http://java.oracle.com" class="downloadlink" target="_blank">Download the latest Java</a></li>
</ul>
</ol>
</div></td>

<!-- TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK ** TABLE DATA BREAK -->

<td id="rightpane">
<div class="keeponscreen">
<h3>Authors</h3>
<div class="author" href="#" id="author1">
<a class="fancybox-effects-d" href="images/benhug.jpg" title="<small><center><b>Benjamin &quot;Benna&quot; Hugo:</b> 3D Plot and Slices</center></small>">
<img src="images/benhug.jpg" alt="Benna Hugo" class="authorphoto"></a>
<h4>Benna Hugo</h4>
</div>
<div class="author" href="#" id="author2">
<a class="fancybox-effects-d" href="images/bratal.jpg" title="<small><center><b>Brandon James Talbot:</b> Sliders and 2D Plot</center></small>">
<img src="images/bratal.jpg" alt="Brandon Talbot" class="authorphoto"></a>
<h4>Brandon Talbot</h4>
</div>
<div class="author" href="#" id="author3">
<a class="fancybox-effects-d" href="images/heistr.jpg" title="<small><center><b>Heinrich Strauss:</b> Heat-Map and Web Layout</center></small>">
<img src="images/heistr.jpg" alt="Heinrich Strauss" class="authorphoto"></a>
<h4>Heinrich Strauss</h4>
</div>
<div class="authordetail" id="authordetailbox">
</div></div>
</td>
</table>
</body>
</html>